<template>
  <div class="treatmentActionPlanHeader-container">
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="cell">
          <span class="title">儿童姓名：</span>
          <div class="content">
            {{ modelValue.name ? modelValue.name : '' }}
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="cell">
          <span class="title">性别：</span>
          <div class="content">{{ modelValue.sex ? '男' : '女' }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="cell">
          <span class="title">出生日期：</span>
          <div class="content">{{ modelValue.birthday }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="cell">
          <span class="title">年龄：</span>
          <div class="content">{{ modelValue.ageName }}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="cell">
          <span class="title">身高：</span>
          <div class="content">
            {{ modelValue.height ? modelValue.height : '' }}
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="cell">
          <span class="title">体重：</span>
          <div class="content">
            {{ modelValue.weight ? modelValue.weight : '' }}
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="cell">
          <span class="title">峰流速（PEF）预计值：</span>
          <div class="content">{{ modelValue.pef ? modelValue.pef : '' }}</div>
          L/min
        </div>
      </el-col>
      <!-- <el-col :span="6">身高：</el-col>
      <el-col :span="6">体重：</el-col>
      <el-col :span="6">峰流速（PEF）预计值：L/min</el-col> -->
      <!-- <el-col :span="6">或个人最佳值：L/min</el-col> -->
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24">
        <div class="cell">
          <span class="title">居住地：</span>
          <div class="content" style="text-align: left; padding-left: 20px">
            {{ modelValue.regionName }}{{ modelValue.address }}
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="cell">
          <span class="title">身份证号：</span>
          <div class="content">{{ modelValue.cardNo }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="cell">
          <span class="title">联系电话：</span>
          <div class="content">{{ modelValue.phone }}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="cell">
          <span class="title">就诊医院：</span>
          <div class="content">{{ modelValue.orgName }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="cell">
          <span class="title">执行开始时间：</span>
          <div class="content">{{ modelValue.startTime }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="cell">
          <span class="title">复诊时间：</span>
          <div class="content">{{ modelValue.followDate }}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <div class="title-cell">
          <div>过敏原检测阳性结果（slgE和/或SPT）:</div>
          <div class="content">{{ allergy }}</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="title-cell">
          <div>哮喘发作诱因：</div>
          <div class="content">{{ incentive }}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
  import { useRoute } from 'vue-router'
  import { onBeforeMount, ref } from 'vue'
  import { getActionPlanRecordAttr } from '@/api/modules/actionPlan.js'
  import { computed } from '@vue/reactivity'

  const props = defineProps({
    modelValue: {
      type: Object,
      default() {
        return { followDate: null }
      },
    },
    disabled: Boolean,
    followDate: String,
  })
  const route = useRoute()
  onBeforeMount(() => {
    const { emrId } = route.query
    if (emrId) {
      toLoad(emrId)
    }
  })
  const emits = defineEmits(['update:followDate'])
  const followTime = computed({
    set(val) {
      console.log('set val = ' + val)
      emits('update:followDate', val)
    },
    get() {
      console.log('get val = ' + props.followDate)
      return props.followDate
    },
  })
  const allergy = ref(null)
  const incentive = ref(null)
  const toLoad = function (emrId) {
    getActionPlanRecordAttr({ medicalRecordId: emrId })
      .then((res) => {
        const { allergyAttr, incentiveAttr } = res.data
        allergy.value = allergyAttr
        incentive.value = incentiveAttr
        // console.log('allergyAttr =' + allergyAttr)
        // console.log('incentiveAttr =' + incentiveAttr)
      })
      .catch((err) => {
        console.log('err =' + err)
      })
  }
</script>
<style lang="scss" scoped>
  .treatmentActionPlanHeader-container {
    padding: 20px;
    .el-row {
      margin-top: 20px;
    }
    .cell {
      display: flex;
      align-items: center;
      padding-right: 20px;
      font-size: 18px;
      height: 44px;
      .select2 {
        flex: 1;
        :deep(.xm-date-picker) {
          width: 100%;
        }
        :deep(.el-input__inner) {
          border-radius: 0;
          border: 0;

          box-shadow: none !important;
          border-bottom: 1px solid #d9d9d9;
          vertical-align: middle;
        }
      }
      .content {
        flex: 1;
        height: 44px;
        border-bottom: 1px solid #d9d9d9;
        text-align: center;
        padding-top: 11px;
      }
    }
    .title-cell {
      font-size: 18px;
      padding: 10px 30px;
      .content {
        margin-top: 10px;
        font-size: 16px;
        padding-left: 10px;
        padding-right: 50px;
        color: rgba(0, 0, 0, 0.65);
      }
    }
  }
</style>
